/*
 * @Author: 别拿暗恋当饭吃. 13466071+lililkli@user.noreply.gitee.com
 * @Date: 2024-07-08 08:44:12
 * @LastEditors: 别拿暗恋当饭吃. 13466071+lililkli@user.noreply.gitee.com
 * @LastEditTime: 2024-07-11 18:34:55
 * @FilePath: \doctor\src\pages\Consultationinformation\Listofinformation\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
//资
//讯
//列
//表
import React, { useEffect } from "react";
import { NavBar, Space, Toast, Image, Dialog, List, SwipeAction } from 'antd-mobile';
import { BellOutline } from 'antd-mobile-icons';
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux'
import {doEndtheconsultation} from 'store/Consultationinformation/Endtheconsultation'
import { doListofinFormation, DoctorIdlistSlice } from 'store/Consultationinformation/ListofinFormation'
// 引入样式
import './style.scss'
const Index = () => {
    // 路由跳转
    const navigate = useNavigate()
    // 导航右侧区域
    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '12px' }}>
                <BellOutline />
            </Space>
        </div>
    )
    //导航点击返回
    const back = () =>
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
    // 进入聊天页
    const chat = () => {
        navigate('/ConversatTionalchat')
    }

    // 数据
    const dispatch = useDispatch<any>()
    // 获取doctorId
    const doctorIdstr = localStorage.getItem("doctorId");
    // 把doctorIdstr转化为number
    const doctorId = Number(doctorIdstr)
    // 定义data对象传递doctorId和sessionId
    const data = {
        doctorId: doctorId,
        sessionId: localStorage.getItem('sessionId')
    }
    // 拿到数据
    const DoctorIdlist: any | null = useSelector(DoctorIdlistSlice)
    // 获取数据
    useEffect(() => {
        dispatch(doListofinFormation(data))
    }, [dispatch])

    const Endtheconsultation = () =>{
        const recordId = 1
        dispatch(doEndtheconsultation(recordId))
    }
    return (
        <div className="ListofinFormation">
            {/* 导航栏 */}
            <NavBar onBack={back} right={right} style={{ borderBottom: '1px solid #c0c0c0' }}>咨询列表</NavBar>
            {/* 列表盒子 */}
            <div >

            </div>
            {/* 渲染数据 */}
            <List>
                {
                    DoctorIdlist && DoctorIdlist.length > 0 ? DoctorIdlist.map((v: any, i: any) =>
                        <SwipeAction
                            // rightActions={rightActions}
                            key={i}
                            rightActions={[
                                {
                                    key: 'delete',
                                    text: '删除',
                                    color: 'danger',
                                },
                            ]}
                        >
                            <List.Item>
                                <div className="ListofinFormation-con" onClick={chat}>
                                    {/* 列表左盒子 */}
                                    <div className="ListofinFormation-con-left">
                                        <img src={v.userHeadPic} alt="" />
                                    </div>
                                    {/* 列表右盒子 */}
                                    <div className="ListofinFormation-con-rigth">
                                        {/* 右上盒子 */}
                                        <div className="ListofinFormation-con-rigth-top">
                                            <h3>{v.nickName}</h3>
                                            <p>{v.inquiryTime}</p>
                                        </div>
                                        {/* 右下盒子 */}
                                        <div className="ListofinFormation-con-rigth-bot">
                                            <p>{v.lastContent}</p>
                                        </div>
                                    </div>
                                </div>
                            </List.Item>
                        </SwipeAction>
                    ) : <div className="consultation">还没有患者向您咨询呢!</div>

                }
            </List>

            <List>

                <SwipeAction
                    // rightActions={rightActions}
                    rightActions={[
                                {
                                    key: 'delete',
                                    text: '结束咨询',
                                    color: 'danger',
                                    onClick:()=>{Endtheconsultation()}
                                },
                            ]}
                >
                    <List.Item>
                        <div className="ListofinFormation-con">
                            {/* 列表左盒子 */}
                            <div className="ListofinFormation-con-left">
                                <img src="" alt="" />
                            </div>
                            {/* 列表右盒子 */}
                            <div className="ListofinFormation-con-rigth">
                                {/* 右上盒子 */}
                                <div className="ListofinFormation-con-rigth-top">
                                    <h3>addadad</h3>
                                    <p>dddd</p>
                                </div>
                                {/* 右下盒子 */}
                                <div className="ListofinFormation-con-rigth-bot">
                                    <p>dddd</p>
                                </div>
                            </div>
                        </div>
                    </List.Item>
                </SwipeAction>
            </List>

        </div >
    )
}
export default Index